<template>
    <div class="member-rebate-card">
        <div class="clearfix good-info after-line">
            <div>
                <div class="single-line-left">
                    <!-- <img class="cover" mode="aspectFill" :src="cover" /> -->
                    <div class="cover" :style="{'background-image': 'url(' + detail.order_cover + ')'}" ></div>
                </div>
                <div class="single-line-center-wrapper info-box overflow">
                    <div class="name hidden-text-v2 large-text">
                        {{detail.title}}
                    </div>
                    <div class="price normal-text">
                        <span class="fl">
                            {{detail.price | currency}}
                            <span class="grey-color">&times;{{detail.goods_number}}</span>
                        </span>
                        <span class="fr">
                            实付金额：{{detail.price * detail.goods_number | currency}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-info normal-text">
            <div class="item">
                <div class="title">所属店铺</div>
                <div class="val">{{detail.shop}}</div>
            </div>
            <div class="item">
                <div class="title">购买者</div>
                <div class="item__val val">
                    {{detail.order_name}}
                    <span v-if="detail.mobile" class="roc__mobile fr" @click="makeCall(detail.mobile)">
                        {{detail.mobile}}
                        <div class="roc__mobile-inner">
                            <span class="roc__mobile-text">
                                <i class="icon">&#xe725;</i>
                                CALL
                            </span>
                        </div>
                    </span>
                </div>
            </div>
            <div class="item">
                <div class="title">支付时间</div>
                <div class="val">{{detail.created_at | dateParse | dateFormat('Y.m.d H:i:s')}}</div>
            </div>
            <div class="item">
                <div class="title">订单状态</div>
                <div class="val color-blue">{{orderStatusText}}</div>
            </div>
            <div v-if="detail.referrer" class="item">
                <div class="title">推荐人</div>
                <div class="item__val val">
                    {{detail.referrer}}
                    <span class="color-red fr">+￥{{detail.money | currency}}</span>
                </div>
            </div>
            <div v-if="detail.referrer" class="item">
                <div class="title">提现状态</div>
                <div class="val">{{detail.status === 'issued' ? '已提现' : '未提现'}}</div>
            </div>
            <div class="item">
                <div class="title">返利状态</div>
                <div class="val">{{detail.rebate_status}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'RebateCard',
})
export default class RebateCard extends Vue {
    /** 套系id */
    @Prop({ required: true, type: Object }) public detail!: Rebate.Detail;

    /** 订单状态文本 */
    public get orderStatusText() {
        switch (this.detail.order_status) {
        case 'init': return '未付款';
        case 'close': return '已关闭';
        case 'paid': return '已付款';
        case 'refund': return '已退款';
        }
    }

    public makeCall(mobile: string) {
        wx.makePhoneCall({
            phoneNumber: mobile,
        });
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.roc {
    &__mobile {
        position: relative;
        &-inner {
            position: absolute;
            right: 0;
            top: 100%;
            color: @color-white;
            .icon {
                display: inline-block;
                width: 22px;
                height: 22px;
                font-size: 16px;
                line-height: 22px;
                background-color: #bbbbbb;
                border-radius: 50%;
                text-align: center;
            }
        }
        &-text {
            position: relative;
            top: 4px;
            display: inline-block;
            padding-right: 4px;
            .text-small();
            background-color: #298DF8;
            border-radius: 12px;
        }
    }
}

.member-rebate-card {
    position: relative;
    width: 370px;
    margin: 12rpx auto;
    line-height: 20px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 1);
    .good-info {
        position: relative;
        padding: 10px 30rpx 16rpx;
        .cover {
            width: 144rpx;
            height: 144rpx;
            background: center no-repeat;
            background-size: cover;
            border-radius: 7px;
        }
        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            height: 144rpx;
            padding: 10rpx;
            .name {
                line-height: 34rpx;
            }
        }
    }
    .good-item {
        padding: 5px 0;
    }
    .name,
    .price {
        padding-left: 16rpx;
    }
    .price {
        padding-top: 6rpx;
    }
    .order-info {
        padding: 10px;
        .item {
            display: flex;
            align-items: center;
            margin: 12rpx 0;
            .title {
                width: 200rpx;
            }
            &__val {
                flex: 1;
            }
        }
    }
}

</style>
